<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>登录页</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <!--<link rel="stylesheet" href="dist/css/AdminLTE.css">-->
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.css">
  <!-- Morris chart -->
  <link rel="stylesheet" href="bower_components/morris.js/morris.css">
  <!-- jvectormap -->
  <link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
  <!-- Date Picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  <script src="jquery-2.1.1.js"></script>
  <style>
  	html,body{height: 100%;width: 100%;margin:0;padding:0;}

	.container{
		background:url("dist/img/background.png") no-repeat;
	    width:100%;
	    height:100%;
	    background-size: cover;
	    background-position: center center;
	    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dist/img/背景层00.png',sizingMethod='scale');
	}
	.hideaa{
		visibility: hidden;	
	}
	@media (min-width: 320px) { /*手机*/
		.login-logo{
			
  			width: 26.9%;
  			height: 2.5%;
  			margin-left: 7.5%;
			margin-top: 2.1%;
			background:url('dist/img/login-mobile-logo.png') no-repeat;
		    background-size: contain;
		   

		}
		.login-center-center{
			background:url('dist/img/login-mobile-center-center.png') no-repeat;
		    width: 52.5%;
  			height: 7.9%;
			margin-left: 7.5%;
			margin-top: 8.3%;
		    background-size: contain;    
		    vertical-align: middle;
    		-webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
    		font-family: '微软雅黑';
		    text-align: center;
		    color: white;
		    

		}
		.login-left-bottom{
			position: absolute;
			background:url('dist/img/login-mobile-left-bottom.png') no-repeat;
		    width: 18.1%;
  			height: 3.3%;
			margin-left: 9.4%;
		    background-size: contain;
  			top: 93%;
  			left: 0;
		}
		
	
		.form-control {
		    display: block;
		    width: 76.9%;
		    height: 4.3%;
		    margin-left: 11.6%;
		    padding: 6px 12px;
		    font-size: 14px;
		    line-height: 1.42857143;
		    color: #555;
		    background-color: #fff;
		    background-image: none;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		/*.btn{
			display: block;
		    width: 76.7%;
		    height: 4.3%;
		   	margin-left: 11.6%;
		    
		}*/
		b{
	 		/*width: 50px;
			height: 28px;*/
			font-family: PingFangSC;
			font-size: 20px;
			padding-left: 10px;
			/*font-weight: 500;*/s
			letter-spacing: 10px;
			text-align: left;
			color: #ffffff;
	    }
		.containerChild{
			margin-top: 3.5%;
		}
		
	}
	@media (min-width: 768px) { /*平板   电脑*/
		.login-logo{
			background:url('dist/img/login-logo.png') no-repeat;
		    width: 10.1%;
  			height: 4.3%;
  	
			margin-left: 2.8%;
			margin-top: 3.9%;
		    background-size: contain;
		    

		}
		.login-center-center{
			background:url('dist/img/login-center-center.png') no-repeat;
		    width: 60%;
  			height: 7%;
  			/*width: 50%;*/
			/*margin-left: 22.2%;*/
			/*margin-right: 22.2%;*/
			/*margin-top: 2%;*/
			margin: 0 auto;
			margin-top: 67px;
			background-size: 100% 100%;
		    /*background-size: contain;*/
		    /*background-size: cover;*/
		    vertical-align: middle;
    		-webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
    		font-family: '微软雅黑';
		    text-align: center;
		    color: white;
		    
		}
		.login-left-bottom{
			position: absolute;
			background:url('dist/img/login-left-bottom.png') no-repeat;
		    width: 18.1%;
  			height: 3.3%;
  			top: 95%;
  			left: -5%;
		    background-size: contain;

		}
		
		
		
		.form-control {
		    display: block;
		    /*width: 66.7%;*/
		    height: 33px;
		    padding: 6px 12px;
		    font-size: 14px;
		    line-height: 1.42857143;
		    color: #555;
		    /*margin-left: 39.6%;*/
		    background-color: #fff;
		    background-image: none;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		.btn{
			display: block;
		    height: 33px;
		    margin: 0 auto;
		}
		 b{
	 		/*width: 50px;
			height: 28px;*/
			font-family: PingFangSC;
			font-size: 20px;
			padding-left: 10px;
			/*font-weight: 500;*/
			letter-spacing: 10px;
			text-align: left;
			color: #ffffff;
			line-height: 22px;
	    }
		.containerChild{
			margin-top: 6.7%;
		}
	}
  </style>
</head>
<body>
	<div class="container">
		<div class="login-logo">
			
		</div>
		<div class="login-center-center">
			
		</div>
			
		<!--<div class="login-left-bottom col-md-2 col-sm-3 col-xs-5">
			<img src="dist/img/login-left-bottom.png" alt="" />
		</div>-->
		<div class="content">
            <div class="containerChild">
                <div class="row">
                    <div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">



                        <form method="#" action="#" id="loginForm">


                            <div class="card card-hidden" style="margin-top: 20px;">
                                
                                <div class="content">
                                    <div class="form-group">
                                        
                                        <input placeholder="用户名" class="form-control" name="usercode" >
                                    </div>
                                    <div class="form-group">
                                        
                                        <input type="password" placeholder="密码" class="form-control" name="password" >
                                    </div>
                                    <div class="form-group hideaa">
                                        
                                        <input type="password" placeholder="密码" class="form-control" name="password1" >
                                    </div>
                                    <div id='loginBtn' class="footer text-center form-group">
	                                    <button type="submit" class="btn btn-fill btn-warning btn-wd form-control" style="background-color: #009fa8;border: none;"><b>登</b><b>录</b></button>
	                                </div>
                                </div>
                                
                            </div>

                        </form>
					
                    </div>
                </div>
            </div>
        </div>
        <div class="login-left-bottom"></div>
	</div>
	<script>
		
		
		$("#loginBtn").click( () => {
		  $.getJSON("moni.json",(result) => {
		  	console.log(result)
		    $.each(result, (i, val) => {
		      console.log(i, val)
		    });
		  });
//			$.ajax({
//				url:"moni.json",
//				success : function(res){
//					console.log(res)
//				}
//				
//			})
		});
		
		
		
		
	</script>
</body>
</html>